import React,{ Component } from "react";


export default class Hello extends Component{
    componentWillReceiveProps(nextProps) {
        console.log("Hello componentWillReceiveProps  1","最新的值：", nextProps);
        console.log("this.props 是旧值: ",this.props, )
    }

    shouldComponentUpdate(nextProps, nextState) {
        /**
         * 作用：决定组件是否要更新
         *  它的返回值是一个布尔值，值为 true更新，值为false不更新
         *  性能优化
         *      可以决定组件是否渲染
         *  浅对比
         *      非应用类型比较
         */
        return !(nextProps.count == this.props.count)
    }

    componentWillUpdate(nextProps, nextState) {
        /**
         * 表示组件更新阶段的准备工作  和 componentWillMount 类似
         * 将来 17 版本 会被 弃用
         */
        console.log("Hello componentWillUpdate  3")
        console.log("nextProps: 3", nextProps)
        console.log("nextState: 3", nextState)
    }
    render() {
        /**
         * 初始阶段执行一次
         * 更新阶段还是执行一次
         *      解析 this.setState 和 this.props
         *      再次生成vdom
         */
        console.log("render  4")
        const {count} = this.props
        return (
            <div>
                <h3>
                    <div>父组件传递过来的数据：{count}</div>
                </h3>
            </div>
        )
    }

    componentDidUpdate(nextProps, nextState) {
        /**
         * 通过filber算法来对比两次vdom，生成patch补丁对象，
         * 根据补丁对象生成真实dom，替换原有的节点
         * 功能 和 componentDidMount
         *      真实dom操作  ok
         *      数据修改、请求、赋值  ok
         */
        console.log("Hello 5", nextProps, nextState)
        document.querySelector("h3").style.background = 'red'
    }

   

   
}

// export default function Hello() {
  

//     return (
//         <div>
          
//         </div>
//     )
// }